<template>
  <div>
    <div class="foot">
      <!-- 左侧侧边栏 -->
      <div class="left scroll-wrapper " ref="scroll">
        <ul class="scroll-content">
          <li
            class="scroll-item van-ellipsis"
            v-for="(item, index) in newdata"
            :key="item.id"
            :class="{ red: index == highlight }"
            @click="clickFn(index)"
            
          >
            {{ item.name }}
          </li>
        </ul>
        <!-- <van-sidebar  class="scroll-content">
          <van-sidebar-item
          :class="{red:index==highlight}"
            :title="item.name"
            class="scroll-item"
            v-for="(item,index) in newdata"
            :key="item.id"
          />
        </van-sidebar> -->
      </div>
      <!-- 右侧侧边栏 -->
      <!-- <div class="right"> -->
      <div class="right scroll-wrapper" ref="foodsUl">
        <ul class="scroll-content">
          <li
            class="food-list-hook scroll-item"
            v-for="(item, index) in newdata"
            :key="index"
          >
            <h1 class="title">
              {{ item.name }}
              <span>{{ item.description }}</span>
              <van-icon name="more-o" size="25" class="icon" />
            </h1>

            <Goods-box :data="item.foods" @shopCarD="dataFn"></Goods-box>
          </li>
        </ul>
      </div>
      <!-- 底部结算模块 -->
      <ShopCar :data="newdata"></ShopCar>
    </div>
  </div>
</template>

<script>
import BScroll from "@better-scroll/core"; //单纯的滚动模块
import { shopping } from "@/api/goods-details.js";
import GoodsBox from "@/components/goods/GoodsBox.vue";
import ShopCar from "@/components/goods/shopcart/shopcart.vue";
import eventBus from "@/EventBus/index.js";
let flag = 'abc'
export default {
  data() {
    return {
      // activeKey: 0, //左侧导航栏的激活索引
      //滚动组件需要的变量
      leftScroll: "",
      rightScroll: "",

      scrollY: 0, //保存右侧滚动的Y轴距离
      scrollArrY: [], //空数组保存右侧每个栏目距离顶部的高度

      newdata: [], //初始化数据
      // flag: "abc",
    };
  },
  //异步初始化数据
  async created() {
    // console.log(75,this.$route.query.id);
    let id = this.$route.query.restaurant_id || 3;
      
    //商品详情页面传递回来的数据
    eventBus.$on("product", (val) => {
      console.log(91);
      this.$nextTick(()=>{
        flag = val;
        console.log(92,val==="returnData");
        console.log(93,flag);
      })
    });

    if (flag == "returnData") {
      console.log(83,flag);
      this.newdata = JSON.parse(localStorage.getItem("shopCarData"));
    } else {
      let { data } = await shopping(id);
      this.newdata = data;
      console.log(84,'异步调用接口的数据', flag);
    }
    // }
    //异步激活滑动组件
    this.init();
  },
  methods: {
    // 滚动组件封装事件
    init() {
      // console.log(this.$refs.scroll);
      this.$nextTick(() => {
        // 左侧导航
        this.leftScroll = new BScroll(this.$refs.scroll, {
          // probeType: 3,
          click: true,
        });
        // 右侧导航
        this.rightScroll = new BScroll(this.$refs.foodsUl, {
          probeType: 3,
          scrollY: true,
          click: true,
        });
        // 监听滚动事件
        this.rightScroll.on("scroll", ({ y }) => {
          this.scrollY = Math.abs(y);
          // console.log(120,this.scrollY);
        });

        //调用初始化滚动数组
        this.initScrollArr();
      });
    },
    //初始化滚动数组
    initScrollArr() {
      //给数组赋值，每个li距离顶部的高度
      const arr = [];
      let top = 0;
      arr.push(top);
      let lis = [
        ...this.$refs.foodsUl.getElementsByClassName("food-list-hook"),
      ]; //假数组变真数组
      lis.forEach((item) => {
        // top += item.clientHeight + 12;高度
        top += item.clientHeight;
        arr.push(top);
      });
      this.scrollArrY = arr;
      // console.log(136,this.scrollArrY);
    },
    //左侧点击事件，右边导航滑动
    clickFn(i) {
      this.scrollY = this.scrollArrY[i];
      this.rightScroll.scrollTo(0, -this.scrollY, 300);
    },

    //传个人详情页面数据
    dataFn(res) {
      localStorage.setItem("initData", JSON.stringify(res));
      this.$router.push("/productDetail");
    },
  },
  computed: {
    // 高亮下标
    highlight() {
      return this.scrollArrY.findIndex(
        (top, i) => this.scrollY >= top && this.scrollArrY[i + 1] > this.scrollY
      );
    }
  },
  components: {
    GoodsBox,
    ShopCar,
  },
};
</script>

<style lang="less" scoped>
.right {
  background-color: red;
  height: 100%;
  width: 100%;
}

.foot {
  display: flex;
  //左边侧边栏
  .left {
    width: 98px;

    .red {
      background-color: red;
      height: 50px;
      border-left: 5px solid #3190e8;
      font-weight: 700;
      font-size: 24px;
    }
    li {
      background-color: #f5f5f5;
      font-size: 18px;
    }
  }
  //右侧侧边栏
  .right {
    // width: 316px;
    .food-list-hook {
      .title {
        padding: 18px;
        position: relative;
        // display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 18px;
        color: #666;
        font-weight: 700;
        background-color: #f5f5f5;
        span {
          font-size: 12px;
          color: #999;
        }
        .van-icon {
          position: absolute;
          right: 13px;
          top: 8px;
        }
      }
    }
  }
}

// 左滑动组件css
.scroll-wrapper.left {
  height: 515px;
  position: relative;
  overflow: hidden;
  background-color: #f5f5f5;
  .scroll-item {
    height: 70px;
    line-height: 70px;
    font-size: 16px;
    // font-weight: bold;
    border-bottom: 1px solid #eee;
    text-align: center;
    // &:nth-child(2n){
    //   background-color: red;
    // }
    // &:nth-child(2n+1){
    //   background-color: #42b983;
    // }
  }
}
// 右侧滑动组件css样式
.scroll-wrapper.right {
  // height: 576px;
  height: 515px;
  position: relative;
  overflow: hidden;
  background-color: #f5f5f5;
}
</style>
